// 音乐控制,移动端一次性触发事件
(()=>{
    var el = document.querySelector("#music");
    $('html').one('touchstart',function(){
        el.play();
    });
})();
// 首页水平感应
(()=>{
    var homepage = document.querySelector(".homePage");
        //检查手机是否支持
            if(window.DeviceOrientationEvent){
            window.addEventListener('deviceorientation',DeviceOrientationHandler,false);
        }else{
            alert("您的浏览器不支持DeviceOrientation");
        }
        //事件处理逻辑
        function DeviceOrientationHandler(event){
            var gamma = Math.floor(event.gamma*3);
            // 限定左右移动范围
            if(gamma>-200&&gamma<200){
                homepage.style.transform = "translate3d("+gamma+"px"+",0,0)";
            }
        }
})();
//首页大门进入场景二门
(()=>{
    var homepage = document.querySelector(".homePage"),
    page2 = document.querySelector(".page2"),
    door1 = document.querySelector(".door1"),
    homeInner = document.querySelector(".homePage .inner");
    //添加侦听,点击添加动画
    door1.addEventListener("touchend",()=>{
        homeInner.style.transition = "all .7s";
        homeInner.style.opacity = "0";
        homeInner.style.transform = "scale3d(5,5,1)";
    });
    //动画结束时隐藏并显示第二场景,过渡出现
    homeInner.addEventListener("transitionend",()=>{
        // console.log("动画结束!可以开门了！")
        homepage.style.display = 'none';
        page2.style.display = 'block';
        page2.style.opacity = '0';
        setTimeout(() => {
            page2.style.opacity = "1";
        }, 50);
    });
})();
//场景二门进入场景三,属于场景二
(()=>{
    var tip1 = document.querySelector(".tip1");
    var doorR = document.querySelector(".doorR");
    var page2 = document.querySelector(".page2");
    var page3 = document.querySelector(".page3")
    tip1.addEventListener("touchend",inthree);
    doorR.addEventListener("touchend",inthree);
    function inthree (){
        doorR.style.transform = "rotateY(-88deg)"; 
    }
    //过渡隐藏,避免display突兀消失
    doorR.addEventListener("transitionend",()=>{
        page2.style.transition = "all .6s";
        page2.style.transform = "scale3d(4,4,1)";
        page2.style.opacity = "0";
        setTimeout(() => {
            page2.style.display = "none";
        }, 600);
    });
    var clientH = document.documentElement.clientHeight;
    page2.addEventListener("transitionend",()=>{
        page3.style.height = clientH+"px";
        page3.style.transition = "all .8s";
        page3.style.opacity = "0";
        setTimeout(() => {
            page3.style.opacity = "1";
        }, 0);
    })
})();
//场景三js
(()=>{
    //滑动触发隐藏滑动提示
    var page3Slide = document.querySelector(".page3 .swiper-slide")
    var tip2 = document.querySelector(".page3 .tip2")
    page3Slide.addEventListener("touchmove",()=>{
        tip2.style.opacity = "0";
        setTimeout(() => {
            tip2.style.display = "none";
        }, 200);
    });
})();
//弹窗js
(()=>{
    var aList = document.querySelectorAll("a");//所有A
    var divList = document.querySelectorAll("div");//所有div
    var popArr = [];//所有可点击的a
    var alertArr = [];//所有弹窗
    // var stX = null;
    // var fnX = null;
    // var chazhi = null;
    // var kaiguan = null;
    var swipertran = document.querySelector(".swiper-wrapper")
    var closeList = document.querySelectorAll(".close");
    var alertList = document.querySelectorAll(".alert");
    var page3Slide = document.querySelector(".page3 .swiper-slide");
    function makeTouchableButton(ele,index){
        var isClick = true;  
        ele.addEventListener('touchstart', function(e){  
            isClick = true;  
        });  
        ele.addEventListener('touchmove', function(e){  
            // console.log("拖动事件");  
            isClick = false;  
        });  
        ele.addEventListener('touchend', function(e){  
            if (isClick == true){
                // console.log("触发点击事件");  
                ele.addEventListener("click",function(){
                    // console.log("我被点了")
                    pop(alertArr[index]);
                });
            }  
        })  
    }
    // --------------------------------------------------
// ---弹窗动画函数--------
    function pop(x){
        x.style.display = "block";
        x.style.transition = "0.3s";
        x.style.opacity = "0";
        setTimeout(() => {
            x.style.opacity = "1";
        }, 300);
    }
// -------------

    // -----------给所有可点击对象添加事件------------------------
   
    //循环出所有点击项
    aList.forEach((el,index)=>{
        el.classList.forEach((e,i)=>{
            if(e.indexOf("photo")>=0 || e.indexOf("Click")>=0){
                popArr.push(el)
            }
        })
    });
    //循环出所有弹出框
    divList.forEach((el,index)=>{
        el.classList.forEach((e,i)=>{
            if(e.indexOf("alert")>=0){
                alertArr.push(el)
            }
        })
    })
    // console.log(popArr)
    // console.log(alertArr)
    popArr.forEach((el,index)=>{
        makeTouchableButton(el,index);
        // el.addEventListener("touchend",function(){
        //     console.log("我被点了")
        //     pop(alertArr[index]);
        // });
    })
    // ---------------给所有close添加关闭事件---------------------
    closeList.forEach((el,index)=>{
        el.addEventListener("touchend",(e)=>{
            e.stopPropagation();
            alertList.forEach((e,i)=>{
                e.style.transition = "0.3s";
                e.style.opacity = "0";
                setTimeout(() => {
                    e.style.display = "none";
                }, 300);
            }) 
        })
    })
    // ----------------------------------------------------
})();